<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name ="keywords" content="{{$metakeyword}}">
    <meta name="description" content="{{$metadesp}}">
    <title>个人中心-个人的直播秀</title>
    <link rel="stylesheet" href="/css/layout.css">
    <link rel="stylesheet" href="/css/lay_icon.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/jquery-3.1.1.js"></script>
    <script src="/js/layer/1.9.3/layer.js"></script>
</head>
<body>
<div class="header">
    <div class="logo">
        <a href="">MINI秀 <b>bete1.0</b></a>
    </div>
    <div class="l_rt">
        @if($user['islogin'])
            <div class="login_user">
                <div class="user_info">
                    <div class="user_icon">
                        <img src="{{$user['bigpic']}}" alt="">
                    </div>
                    <div class="user_name"><a href="/profile">{{$user['username']}}</a></div>
                </div>
                <a href="" style="font-size: 14px">退出</a>
            </div>
        @else
            <a href="javascript:;" onclick="login()">登录</a>
            <a href="javascript:;" onclick="register()">注册</a>
        @endif
    </div>
</div>
<div class="content" style="clear: both; overflow: auto;">
    <div class="setbar">
        <ul>
            <li><a href="/"><i class="home"></i><span>首页</span></a></li>
            <li><a href="/cate/index"><i class="cate"></i><span>分类</span></a></li>
            <li><a href=""><i class="gc"></i><span>广场</span></a></li>
            <li><a href=""><i class="fa"></i><span>Fans</span></a></li>
            <li><i class="hide"></i><span>隐藏</span></li>
        </ul>
    </div>
    <div class="con" style="width: 95%; height: 900px; float: right;">
        <div class="profile_head">
            <div class="cover_bg">

            </div>
            <div class="profile_user">
                <div class="profile_user_icon">
                    <img src="{{$user['bigpic']}}" alt="">
                </div>
                <div class="profile_user_info">
                    <h3>{{$user['nickname']}}</h3>
                    <p>等级：{{$user['level_common']}}</p>
                    <div class="user_intro">
                        @if($user['interest']) {{$user['interest']}} @else 这家伙很懒，什么都没写 @endif <span class="edit"></span>
                    </div>
                </div>
            </div>
            <div class="nav_item">
                <ul>
                    <li><a href="">个人中心</a></li>
                    <li><a href="">账号安全</a></li>
                    <li><a href="">我的关注</a></li>
                </ul>
            </div>
            <div class="box">
                <form action="save-auth-info" method="post" id="from">
                 <div class="box_auth">
                      <div class="auth_title">实名认证</div>
                      <div class="form_row">
                           <span>真实姓名:</span>
                           <input type="text" placeholder="请如实填写你的真实姓名">
                      </div>
                      <div class="form_row">
                           <span>身份证正反面:</span>
                           <div class="idcard_upload">
                                <div class="idcard_upload_item">
                                    <div class="idcard_view">

                                        <input type="file" name="file" data-toggle="0" onchange="upload(this)">
                                        <input type="hidden" name="id_card_zhenmian" class="imageUrl">
                                    </div>
                                    <div class="verify_loading">
                                        <span class="v_t"></span>
                                        <span class="v_l"></span>
                                        <span class="v_b"></span>
                                        <span class="v_r"></span>
                                        <div class="scan_line"></div>
                                        <img src="" alt="">
                                        <div class="lay"></div>
                                    </div>
                                    <div class="idcard_tips">
                                         <h3>[请上传身份证正面照]</h3>
                                         <p>请保证照片内容清晰可见，不允许存在ps痕迹</p>
                                    </div>
                                </div>
                               <div class="idcard_upload_item">
                                   <div class="idcard_view">
                                       <input type="file" data-toggle="1" onchange="upload(this)">
                                       <input type="hidden" name="id_card_fanmian" class="imageUrl">
                                   </div>
                                   <div class="verify_loading">
                                       <span class="v_t"></span>
                                       <span class="v_l"></span>
                                       <span class="v_b"></span>
                                       <span class="v_r"></span>
                                       <div class="scan_line"></div>
                                       <img src="" alt="">
                                       <div class="lay"></div>
                                   </div>
                                   <div class="idcard_tips">
                                       <h3>[请上传身份证背面照]</h3>
                                       <p>请保证照片内容清晰可见，不允许存在ps痕迹</p>
                                   </div>
                               </div>
                           </div>
                      </div>
                      <div class="form_row">
                         <span>手持身份证:</span>
                          <div class="idcard_upload">
                              <div class="idcard_upload_item">
                                  <div class="idcard_view">
                                      <input type="file" data-toggle="2" onchange="upload(this)">
                                      <input type="hidden" name="phone_tou" class="imageUrl">
                                  </div>
                                  <div class="verify_loading">
                                      <span class="v_t"></span>
                                      <span class="v_l"></span>
                                      <span class="v_b"></span>
                                      <span class="v_r"></span>
                                      <div class="scan_line"></div>
                                      <img src="" alt="">
                                      <div class="lay"></div>
                                  </div>
                                  <div class="idcard_tips">
                                      <h3>[请上传手持身份证照]</h3>
                                      <p>请保证照片内容清晰可见，不允许存在ps痕迹</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="form_row">
                          <span></span>
                          <input type="button" class="sub" value="提交">
                      </div>
                 </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>
</body>
</html>
<script>

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })

    var verify = false;
    var verifytimer = null;
    /**
     * 上传身份证
     * @param _this
     */
   function upload(_this) {
        if(verify){
            layer.msg('请等待验证完整', {icon: 2});
            return;
        }
        var filename = _this.value;
        var fix = filename.substring(filename.lastIndexOf('.'));
        var strRegex = "(.jpg|.png|.jpeg)$"; //用于验证图片扩展名的正则表达式
        var re=new RegExp(strRegex);
        if (!re.test(fix)) {
            layer.msg('格式不允许上传', {icon: 2});
            return;
        }
        verify = true;
        var oFReader = new FileReader();
        var id = _this.getAttribute('data-toggle');
        oFReader.readAsDataURL(_this.files[0]);
        oFReader.onload = function (oFREvent) {
            var base = oFREvent.target.result ;
            var view = document.getElementsByClassName('verify_loading')[id].getElementsByTagName('img')[0];
            document.getElementsByClassName('verify_loading')[id].style.display = 'block';
            view.src = base;
            scan_loading(id);
            $.ajax({
                type:"POST",
                url:"verify-idcardvalidity",
                dataType:'json',
                data:{base64:base},
                success:function (data) {
                     if (data['code']==200) {
                          document.getElementsByClassName('imageUrl')[id].value = data['dest'];
                          document.getElementsByClassName('lay')[id].style.display = 'none';
                          document.getElementsByClassName('scan_line')[id].style.display = 'none';
                          clearInterval(verifytimer);
                          verify = false;
                     }
                }
            })
        }
   }

    /**
     * 验证等待中
     */
   function scan_loading(id) {
       var scan_line = document.getElementsByClassName('scan_line')[id];
       var dir = "r";
       verifytimer = setInterval(function () {
           if(scan_line.offsetLeft >= 290) {
               dir = "l";
           }
           if(scan_line.offsetLeft <= 0) {
               dir = "r";
           }
           if (dir=='l'){
                scan_line.style.left = scan_line.offsetLeft-1+'px';
           }else{
                scan_line.style.left = scan_line.offsetLeft+1+'px';
           }
       },30)
   }

   $('.sub').on('click',function () {
        // 检测姓名有没有填写
        var input = document.getElementsByClassName('box_auth')[0].getElementsByTagName('input');
        console.log(input[0].value);
        if (input[0].value==''){
             layer.msg('请填写姓名',{icon:1});
             return false;
        }

        // 检测身份证是否上传
       if (input[0].value=='' || input[1].value=='' || input[2].value==''){
           layer.msg('请上传身份证',{icon:1});
           return false;
       }
       var form = document.getElementById('from');
       form.submit();
   })
</script>